<template>
  <div
    :class="{'hidden':hidden}"
    class="pagination-container"
  >
    <el-pagination
      :params="params"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="nextPage ? totalNum : endTotalNum"
      popper-class="pagination-dropdown"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div
      v-if="nextPage === true"
      class="pagination-info"
    >
      当前显示 <span v-if="total>0">{{ (page-1)*limit+1 }}-{{ page*limit }} </span><span v-else>0-0</span>， 共 <span :class="{'totalMore': !onlyCountFlag, 'total': onlyCountFlag}" @click="totalClick">{{ totalHint }}</span> 条记录
    </div>
    <div
      v-if="nextPage === false"
      class="pagination-info"
    >
      当前显示 <span v-if="total>0">{{ (page-1)*limit+1 }}-{{ page*limit }} </span><span v-else>0-0</span>， 共 <span :class="{'totalMore': !onlyCountFlag, 'total': onlyCountFlag}" @click="totalClick">{{ endTotalHint }}</span> 条记录
    </div>
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'
/**
* 参数说明：
*  total:接口返回总页数(后台返回参数为total)
*  page:当前查询页数（后台返回参数为page）
*  pageSizes：[7, 20, 30, 50, 100]（分页条数选择查询数组）
*  autoScroll：Boolean （是否返回顶部）
*  limit：每页查询条数（返回参数为rows）
*/

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50, 100]
      }
    },
    layout: {
      type: String,
      default: 'sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: false
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      totalNum: 0, // 显示条数
      totalHint: 0,
      nextPage: true,
      endtTotalHint: 0,
      endTotalNum: 0,
      onlyCountFlag: false
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    }
  },
  watch: {
    total: {
      handler(newVal, oldVal) {
        if (newVal === 0) this.onlyCountFlag = false
        this.freshInfo(newVal)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
         * 数据变化动态更新条数
         * 1.获取每一页显示多少条rows limit
         * 2.用每一页返回多少条数据确定是否有下一页 total
         * 3.假如有下一页用totalNum = page*rows+1 来显示页码
         * 4.当到最后一页将页数
         */
    freshInfo(total) {
      // alert(this.total)
      const rows = this.limit
      // total > rows说明有下一页
      if (total > this.page * rows) {
        this.nextPage = true
        this.$set(this, 'totalNum', total)
        if (this.onlyCountFlag) this.$set(this, 'totalHint', `${total - 1}`)
        if (!this.onlyCountFlag) this.$set(this, 'totalHint', `${total - 1}+`)
      } else {
        // 说明已经到最后一页了
        this.nextPage = false
        this.totalNum = this.page * rows
        this.endTotalNum = this.page * rows
        this.totalHint = `${total}`
        this.endTotalHint = `${total}`
      }
    },
    handleSizeChange(val) {
      const tableRequestParam = {}
      tableRequestParam.page = 1
      tableRequestParam.rows = val
      this.onlyCountFlag = false
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
      this.$emit('pagination', tableRequestParam)
    },
    handleCurrentChange(val) {
      const tableRequestParam = {}
      tableRequestParam.page = val
      tableRequestParam.rows = this.pageSize
      this.onlyCountFlag = false
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
      this.$emit('pagination', tableRequestParam)
    },
    totalClick() {
      if (!this.onlyCountFlag) {
        const tableRequestParam = {}
        tableRequestParam.page = 1
        tableRequestParam.rows = this.pageSize
        this.onlyCountFlag = true
        if (this.autoScroll) {
          scrollTo(0, 800)
        }
        this.$emit('on-total', tableRequestParam)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.total {

}
.totalMore {
  color: #3DC094;
  cursor: pointer;
}
</style>
